<template>

  <div class="swiper">
    <div class="swiper-wrapper">
      <slot></slot>

    </div>

    <div class="swiper-pagination"></div>

    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>

</template>
<script>
// import Swiper from 'swiper'       //把swiper所有模块都导入进来
// import 'swiper/swiper-bundle.css'
import Swiper, { Navigation, Pagination, Autoplay } from 'swiper'


// import styles bundle
import 'swiper/swiper-bundle.min.js'
import 'swiper/swiper-bundle.min.css';

export default {
  props: {
    autoplay: {
      type: Boolean,
      default: true
    },
    loop: {
      type: Boolean,
      default: true
    }
  },
  mounted () {
    Swiper.use([Navigation, Pagination, Autoplay]);
    var mySwiper = new Swiper('.swiper', {
      //direction: 'vertical', // 垂直切换选项
      speed: 1000,
      // Cannot read properties of undefined (reading 'parentNode')   出现这个就把loop注释掉
      // loop: true, // 循环模式选项
      autoplay: this.autoplay,
      // 如果需要分页器
      pagination: {
        el: '.swiper-pagination',
      },

      // 如果需要前进后退按钮
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    })

  },
}
</script>
<style scoped>
.swiper-wrapper {
  transition-timing-function: cubic-bezier(0.42, 0, 1, 0.6);
}
</style>